<template>
  <div class="outter" style="background-color: white">
    <van-row class="content">
      <van-col span="4">
        <van-image
          round
          width="3rem"
          height="3rem"
          :src="article.createUserAvatar"
        />
      </van-col>
      <van-col span="20">
        <span class="article-username">{{ article.createUserNickname }}</span
        ><br />
      </van-col>
    </van-row>
    <van-row class="content">
      {{ article.title }}
    </van-row>
    <van-row class="content-area">
      <div class="content">
        {{ article.content }}
      </div>
      <van-row style="margin-top: 0.5em">
        <van-col :span="8" v-for="(url, index) in article.fileList" :key="url">
          <van-image
            :src="url"
            width="100%"
            @click="imagePreview(article.fileList, index)"
          >
            <template v-slot:error>图片加载失败</template>
          </van-image>
        </van-col>
      </van-row>
      <van-row style="text-align: center; margin-top: 0.5em">
        <van-col span="8">
          <van-icon
            name="good-job-o"
            size="1em"
            v-if="article.likeStatus == 0"
            @click="like(article, 1)"
          />
          <van-icon
            name="good-job"
            size="1em"
            color="#40C0C9"
            v-else
            @click="like(article, 0)"
          />
          {{ article.likedNum }}
        </van-col>
        <van-col span="8"> <van-icon name="comment-o" size="1em" />0 </van-col>
        <van-col span="8">
          <van-icon name="share-o" size="1em" />
        </van-col>
      </van-row>
    </van-row>

    <span>{{ article.createTime }}</span>
    <br /><span class="categoryName">#{{ article.category.name }}</span>

    <van-image-preview
      v-model="imagePreviewOption.showImg"
      :images="imagePreviewOption.images"
      :startPosition="imagePreviewOption.index"
      @change="imagePreviewChange"
      @close="showAddBtn = true"
    >
      <template v-slot:index
        >第{{ imagePreviewOption.currentIndex }}张</template
      >
    </van-image-preview>
  </div>
</template>
<script>
export default {
  name: "article-info",
  props: {
    article: {
      type: Object,
    },
  },
  data() {
    return {
      imagePreviewOption: {
        images: [],
        showImg: false,
        currentIndex: 1,
        index: 0,
      },
    };
  },
  methods: {
    imagePreview(list, index) {
      this.showAddBtn = false;
      this.imagePreviewOption.showImg = true;
      this.imagePreviewOption.images = list;
      this.imagePreviewOption.currentIndex = index + 1;
      this.imagePreviewOption.index = index;
    },
    imagePreviewChange(index) {
      this.imagePreviewOption.currentIndex = index + 1;
    },
    like(item, type) {
      item.likeStatus = type;
      if (type == 0) {
        item.likedNum--;
      } else {
        item.likedNum++;
      }
      this.postRequest("/article/like", {
        articleId: item.id,
        likeStatus: type,
      });
    },
  },
};
</script>
<style scoped>
.content {
  width: 90%;
  margin: auto;
}
.outter {
  width: 100%;
  background-color: #fff;
}
.content-area {
  padding: 0.5em 0;
  margin-top: 0.5em;
}
</style>
